<template>
    <svg aria-hidden="true" class="svg-icon" :style="{ width: `${size}px`, height: `${size}px`, }">
        <use :xlink:href="symbolId" />
    </svg>
</template>
  
<script lang="ts">
import { defineComponent, computed } from 'vue'

export default defineComponent({
    name: 'SvgIcon',
    props: {
        // 使用的svg图标名称也就是svg文件名
        name: {
            type: String,
            required: true,
        },
        prefix: {
            type: String,
            default: 'icon',
        },
        size: {
            type: Number,
            default: 14,
        }
    },
    setup(props) {
        const symbolId = computed(() => `#${props.prefix}-${props.name}`)
        return { symbolId }
    },
})
</script>
<style scope>
.svg-icon {
    fill: currentColor;
}
</style>